<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span class="s1">{{
                            $t('basics.systemMobileNumber')
                        }}</span>
                        <a-input
                            style="flex: 1"
                            v-model="form.system_phonenumber"
                            :placeholder="$t('basics.systemMobileNumber')"
                        />
                    </div>
                    <div>
                        <span class="s1">{{ $t('basics.deviceName') }}</span>
                        <a-input
                            style="flex: 1"
                            v-model="form.mobile_name"
                            :placeholder="$t('basics.deviceName')"
                        />
                    </div>

                    <div>
                        <span class="s1">{{ $t('basics.sendOrNot') }}</span>
                        <a-select
                            style="width: 120px"
                            class="mr20"
                            v-model="form.can_send"
                            :placeholder="$t('basics.sendOrNot')"
                        >
                            <a-option
                                :label="$t('basics.canSend')"
                                :value="1"
                            ></a-option>
                            <a-option
                                :label="$t('basics.notSend')"
                                :value="0"
                            ></a-option>
                        </a-select>
                        <a-button class="mr20" type="primary" @click="getList">
                            <icon-search class="mr6" />
                            {{ $t('basics.search') }}
                        </a-button>
                        <a-button
                            class="mr20"
                            type="secondary"
                            @click="resetButton"
                        >
                            <icon-refresh class="mr6" />
                            {{ $t('basics.reset') }}
                        </a-button>
                        <a-button
                            class="mr20"
                            type="primary"
                            @click="popCheckAllNumbers"
                        >
                            {{ $t('basics.checkAllNumbers') }}
                        </a-button>
                        <a-button
                            class="mr20"
                            type="primary"
                            @click="popAloneCheck"
                        >
                            {{ $t('basics.aloneCheck') }}
                        </a-button>
                    </div>
                </div>
            </div>
            <!-- <div class="container-header mt10 mb10">
                <div class="container-header-tr">
                    <div>
                        <a-button
                            type="primary"
                            status="danger"
                            @click="deleteAcc(0)"
                        >
                            <icon-delete class="mr6" />
                            {{ $t('basics.delete') }}
                        </a-button>
                    </div>
                </div>
            </div> -->
            <div class="container-content">
                <div class="container-content-table mt10">
                    <a-table
                        :stripe="true"
                        :columns="tableModel.columns"
                        :data="tableModel.list"
                        :loading="tableModel.loading"
                        :row-selection="tableModel.rowSelection"
                        @selection-change="getRowData"
                        v-model:selectedKeys="tableModel.selectedKeys"
                        row-key="id"
                        :pagination="false"
                    >
                        <template #system_phonenumber="{ record }">
                            <div style="display: flex; align-items: center">
                                {{ record.system_phonenumber }}
                                <a-tooltip
                                    v-if="record.too_many_times_failed == 1"
                                    :content="$t('basics.numberTips')"
                                    position="top"
                                >
                                    <icon-exclamation-circle-fill
                                        :size="18"
                                        style="
                                            color: red;
                                            cursor: pointer;
                                            margin-left: 6px;
                                        "
                                    />
                                </a-tooltip>
                            </div>
                        </template>
                        <template #can_send="{ record }">
                            <div>
                                <a-popconfirm
                                    @ok="statusChange(record)"
                                    :content="
                                        $t('basics.confirmEdit') +
                                        (record.can_send == 1
                                            ? $t('basics.offTxt')
                                            : $t('basics.openTxt')) +
                                        $t('basics.whatTxt')
                                    "
                                >
                                    <a-switch
                                        :beforeChange="handleChangeIntercept"
                                        v-model="record.can_send"
                                        :checked-value="1"
                                        :unchecked-value="0"
                                    />
                                </a-popconfirm>
                            </div>
                        </template>
                        <!-- <template #is_online="{ record }">
                            <div>
                                <a-button
                                    v-if="record.is_online"
                                    style="color: #00b42a; font-size: 14px"
                                    type="text"
                                    status="success"
                                    >{{ $t('basics.online') }}</a-button
                                >
                                <a-button
                                    v-else
                                    style="color: #f53f3f; font-size: 14px"
                                    type="text"
                                    status="danger"
                                    >{{ $t('basics.liveline') }}</a-button
                                >
                            </div>
                        </template> -->

                        <!-- <template #bind_time="{ record }">
                            <div v-if="record.bind_time">
                                {{
                                    $common.formatDate(
                                        new Date(record.bind_time * 1000)
                                    )
                                }}
                            </div>
                        </template> -->
                        <!-- <template #last_send_time="{ record }">
                            <div>
                                {{
                                    record.last_send_time
                                        ? $common.formatDate(
                                              new Date(
                                                  record.last_send_time * 1000
                                              )
                                          )
                                        : ''
                                }}
                            </div>
                        </template> -->
                        <!-- <template #last_online_time="{ record }">
                            <div>
                                {{
                                    record.last_online_time
                                        ? $common.formatDate(
                                              new Date(
                                                  record.last_online_time * 1000
                                              )
                                          )
                                        : ''
                                }}
                            </div>
                        </template> -->
                        <!-- <template #status="{ record }">
                            <div>
                                <a-button
                                    v-if="record.status === 1"
                                    type="text"
                                    status="success"
                                    >{{ $t('basics.zhengchang') }}</a-button
                                >
                                <a-button v-else type="text" status="danger">{{
                                    $t('basics.disabledTxt')
                                }}</a-button>
                            </div>
                        </template> -->
                    </a-table>
                    <div
                        class="_crud-footer mt-3 text-right"
                        ref="crudFooterRef"
                    >
                        <a-pagination
                            :total="tableModel.total"
                            show-total
                            show-jumper
                            show-page-size
                            @page-size-change="getList"
                            @change="getList"
                            v-model:current="tableModel.page"
                            :page-size-options="[10, 20, 50, 100]"
                            :default-page-size="100"
                            v-model:page-size="tableModel.pageSize"
                            style="display: inline-flex"
                        />
                    </div>
                </div>
            </div>
        </div>
        <a-modal
            v-model:visible="tableModel.visible"
            :render-to-body="false"
            :footer="false"
        >
            <template #title>{{ $t('basics.receivingPhone') }}</template>
            <a-form :model="tableModel.bandForm" ref="bandFormRef">
                <a-form-item
                    field="target_phonenumber"
                    :label="$t('basics.receivingPhone')"
                    label-col-flex="100px"
                    validate-trigger="blur"
                >
                    <a-input
                        v-model="tableModel.bandForm.target_phonenumber"
                        :placeholder="$t('basics.receivingPhone')"
                    ></a-input>
                </a-form-item>
            </a-form>
            <div class="dialog-foot">
                <a-button class="mr20" @click="tableModel.visible = false">{{
                    $t('basics.concel')
                }}</a-button>
                <a-button type="primary" style="margin-right: 10px"
                    ><a-link :hoverable="false" @click="postCheckAllNumbers">{{
                        $t('basics.sure')
                    }}</a-link></a-button
                >
            </div>
        </a-modal>
        <a-modal
            v-model:visible="tableModel.aloneCheckVisible"
            :render-to-body="false"
            :footer="false"
        >
            <template #title>{{ $t('basics.aloneCheck') }}</template>
            <a-form :model="tableModel.bandForm" ref="bandFormRef">
                <a-form-item
                    field="target_phonenumber"
                    :label="$t('basics.receivingPhone')"
                    label-col-flex="100px"
                    validate-trigger="blur"
                >
                    <a-input
                        v-model="tableModel.bandForm.target_phonenumber"
                        :placeholder="$t('basics.aloneCheckNumber')"
                    ></a-input>
                </a-form-item>
            </a-form>
            <div class="dialog-foot">
                <a-button
                    class="mr20"
                    @click="tableModel.aloneCheckVisible = false"
                    >{{ $t('basics.concel') }}</a-button
                >
                <a-button type="primary" style="margin-right: 10px"
                    ><a-link :hoverable="false" @click="postAloneCheck">{{
                        $t('basics.sure')
                    }}</a-link></a-button
                >
            </div>
        </a-modal>
    </div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { useI18n } from 'vue-i18n';
import { $request } from '@/utils/request.js';
import { useUserStore } from '@/store';
const user = useUserStore().user;
const { t } = useI18n();
const checkedList = ref([]);
const { proxy } = getCurrentInstance();
const tableModel = reactive({
    loading: true,
    columns: [
        {
            title: t('basics.systemMobileNumber'),
            dataIndex: 'system_phonenumber',
            slotName: 'system_phonenumber',
            width: 300
        },
        {
            title: t('basics.deviceName'),
            dataIndex: 'mobile_name',
            slotName: 'mobile_name'
        },
        {
            title: t('basics.sendOrNot'),
            dataIndex: 'can_send',
            slotName: 'can_send'
        }
    ],
    selectedKeys: [],
    rowSelection: {
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false
    },
    list: [],
    systemPhonenumber: '',
    page: 1,
    total: 0,
    pageSize: 20,
    visible: false, //一键检查弹窗
    aloneCheckVisible: false, //指定检查弹窗
    bandForm: {}
});

const form = reactive({
    system_phonenumber: null,
    mobile_name: null
});

// 获取选择列
const getRowData = (selectedRowKeys) => {
    checkedList.value = selectedRowKeys;
    console.log(checkedList.value);
};
/**刷新 */
const resetButton = async () => {
    tableModel.loading = true;
    tableModel.selectedKeys = [];
    tableModel.page = 1;
    tableModel.pageSize = 20;
    form.is_online = null;
    form.system_phonenumber = '';
    form.can_send = null;
    form.mobile_name = null;
    await getList();
    tableModel.loading = false;
};
// 删除
// const deleteAcc = () => {
//     if (!tableModel.selectedKeys.length) {
//         proxy.$message.error(t('basics.deleteTips'));
//         return;
//     }
//     proxy.$modal.warning({
//         title: t('basics.xitongtishi'),
//         content: t('basics.deleteContent'),
//         hideCancel: false,
//         cancelText: t('basics.concel'),
//         okText: t('basics.sure'),
//         simple: false,
//         onOk: () => {
//             console.log(tableModel.selectedKeys);
//             let arr = [];
//             for (let i in tableModel.selectedKeys) {
//                 arr.push(
//                     ...tableModel.list.filter(
//                         (n) => n.id === tableModel.selectedKeys[i]
//                     )
//                 );
//             }
//             console.log(arr);
//             arr = arr.map((n) => n.system_phonenumber);

//             $request
//                 .post('/TcardClient/tphonenumberDetail/delete', {
//                     user_id: user.id,
//                     system_phonenumber_array: arr
//                 })
//                 .then((res) => {
//                     searchButton();
//                     proxy.$message.success(t('basics.deleteSuccess'));
//                 });
//         }
//     });
// };

/**获取列表数据*/
const getList = async () => {
    let params = {
        page: tableModel.page,
        pageSize: tableModel.pageSize,
        system_phonenumber: form.system_phonenumber,
        can_send: form.can_send,
        is_online: 1,
        mobile_name: form.mobile_name
    };
    let { items, pageInfo } = await $request.get(
        '/TcardManage/phonenumberDetail/getList',
        params
    );
    tableModel.list = items;
    tableModel.total = pageInfo.total;
};

/**检查所有号码*/
const popCheckAllNumbers = async () => {
    tableModel.bandForm = {};
    tableModel.visible = true;
};
/**检查所有号码-确认*/
const postCheckAllNumbers = async () => {
    let data = {
        ...tableModel.bandForm
    };
    await $request.post('/TcardManage/phonenumberDetail/checkCanSend', data);
    tableModel.visible = false;
    proxy.$message.success(t('basics.successTxt'));
};
/**指定号码检查*/
const popAloneCheck = async () => {
    if (!checkedList.value.length) {
        proxy.$message.error(t('basics.checkNumber'));
        return;
    }
    tableModel.bandForm = {};
    tableModel.aloneCheckVisible = true;
};
/**指定号码检查-确认*/
const postAloneCheck = async () => {
    let data = {
        system_phonenumber_array: getPhoneArr(),
        target_phonenumber: tableModel.bandForm.target_phonenumber
    };
    await $request.post('/TcardManage/phonenumberDetail/checkCanSendV2', data);
    tableModel.aloneCheckVisible = false;
    proxy.$message.success(t('basics.successTxt'));
};
/**开关-确认 */
const statusChange = async (row) => {
    // row.status = Number(!row.status);
    let data = {
        system_phonenumber: row.system_phonenumber,
        can_send: Number(!row.can_send)
    };
    await $request.post('/TcardManage/phonenumberDetail/updateCanSend', data);
    proxy.$message.success(t('basics.successTxt'));
    getList();
};
const handleChangeIntercept = async (newValue) => {
    return false;
};
const getPageInfo = async () => {
    tableModel.loading = true;
    await getList();
    tableModel.loading = false;
};
/**返回选中ID的手机号数组 */
const getPhoneArr = () => {
    let arr = [];
    for (let i in checkedList.value) {
        for (let j in tableModel.list) {
            if (checkedList.value[i] === tableModel.list[j].id)
                arr.push(tableModel.list[j].system_phonenumber);
        }
    }
    return arr;
};
getPageInfo();
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
</style>
